<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>

		<div id="app">
			商品：<input type="text" id="product" v-model="product">
			<br>
			数量：<input type="number" id="num" v-model.number="num">
			<br>
			价格：<input type="number" id="price" v-model.number="price">
			<br>
			<button @click="addList">添加到购物车</button>
			<ul>
				<li v-for="(item,index) in list">
					<strong>{{item.product}}</strong>
					的数量是
					<strong>{{item.num}}</strong>
					,单价是{{item.price}}
					，小计:
					<u>{{item.price * item.num}}</u>
					</li>
				<li>总计：总数-----{{total}},总价------{{totalPrice}}</li>
			</ul>
		</div>

		<script>
			var app = new Vue({
				el: "#app",
				data: {
					product:"",
					num:'',
					price:'',
					list: [
						{
							product:"牙刷",
							num:5,
							price:10,
						},
						{
							product:"牙膏",
							num:2,
							price:20,
						},
						{
							product:"镜子",
							num:3,
							price:30,
						}
					]
				},
				computed:{
					total(){
						var total = 0;
						this.list.forEach(e => total += e.num);
						return total;
					},
					totalPrice(){
						var totalPrice = 0;
						this.list.forEach(e=> totalPrice += e.price * e.num);
						return totalPrice;
					}
				},
				methods: {
					addList() {
						if (this.product != '' && this.num > 0 && this.price > 0) {
							this.list.push({
								"product" : this.product,
								"num" : this.num,
								"price" : this.price
							})
						}
					}
				}
	
			})
		</script>
	</body>
</html>
